<route type="page" lang="json5">
{
  style: { navigationStyle: 'custom' }
}
</route>
<template>
  <view class="full-page" :style="{ paddingTop: safeArea.top + 'px', paddingBottom: safeArea.bottom + 'px' }">
    <wd-navbar title="取餐" left-text="返回" left-arrow @click-left="toTabOrderPage"></wd-navbar>
    <view>
      <view class="pick-img">
        <wd-img :width="260" :height="260" :src="pickUpImg" />
      </view>
    </view>

    <!--订单信息-->
    <view class="pick-code-text" v-if="orderInfoVo.orderStatus !== '3'">取餐码：{{ orderInfoVo.orderPickCode }}</view>
    <view class="pick-code-text" v-if="orderInfoVo.orderStatus === '3'">订单已完成</view>
    <view class="order-progress">
      <wd-steps custom-class="custom-step" :active="stepActive" align-center>
        <wd-step icon="list" title="已下单" />
        <wd-step icon="chart-bubble" title="制作中" />
        <wd-step icon="clock" title="请取餐" />
        <wd-step icon="check" title="已完成" />
      </wd-steps>
    </view>

    <view class="order-info">
      <view>订单信息</view>
      <view class="order-info-form">
        <view class="order-info-item">订单编号：{{ orderInfoVo.orderId }}</view>
        <view class="order-info-item">下单人：{{ orderInfoVo.orderMember }}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'

import pickUpImg from '@/static/images/pickup/pickup.png'
import { getOrderInfoApi } from '@/api/order/api'
import { OrderInfoVO } from '@/api/order/orderInfo'

const orderId = ref('')

const orderInfoVo = ref<OrderInfoVO>({
  orderId: '',
  orderMember: '',
  orderPrice: '',
  orderStatus: '',
  orderRemark: '',
  orderPickTime: '',
  orderContact: '',
  orderDiscount: '',
  orderPayType: '',
  orderPickCode: ''
})

const stepActive = ref()

onLoad(options => {
  orderId.value = options.orderId
  console.log('canshu' + options.orderId)

  getOrderInfoApi(options.orderId).then(res => {
    orderInfoVo.value = res.data
    stepActive.value = Number(orderInfoVo.value.orderStatus)
  })
})

// 定义安全区域信息的响应式变量
const safeArea = ref({
  top: 0,
  bottom: 0
})

onMounted(() => {
  // 获取系统信息
  const systemInfo = uni.getSystemInfoSync()
  // 设置安全区域信息
  safeArea.value = {
    top: systemInfo.safeAreaInsets.top,
    bottom: systemInfo.safeAreaInsets.bottom
  }
})

const toTabOrderPage =()=>{
   uni.switchTab({
    url: '/pages/order/index'
  })
}
</script>

<style lang="scss" scoped>
html,
body {
  margin: 0;
  padding: 0;
}

/* 设置根元素的背景颜色 */
.full-page {
  background-color: #fbece5;
  min-height: 100vh;
}

.pick-img {
  display: flex;
  justify-content: center;
}

.pick-code-text {
  display: flex;
  justify-content: center;
  font-size: 45rpx;
}

.order-progress {
  margin: 40rpx;
}

.order-info {
  background: #fdfaf0;
  margin: 30rpx;
  padding: 40rpx;
  border-radius: 20rpx; /* 四角为圆角 */
  font-size: 95%;

  .order-info-form {
    .order-info-item {
      margin: 30rpx;
    }
  }
}

:deep() {
  .wd-step.is-finished .wd-step__icon-inner {
    color: #e8655c;
  }

  .wd-step__icon {
    background-color: #fbece5;
  }

  .wd-step.is-finished .wd-step__title {
    color: #e8655c;
  }

  .wd-step.is-process .wd-step__icon.is-icon .wd-step__icon-inner {
    color: #f69947;
  }

  .wd-step.is-process .wd-step__title {
    color: #f69947;
  }
}
</style>
